import { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import Logo from "../assets/logo";
import { Button, Form, Input, NavBar, Card, Toast } from "antd-mobile";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import { setToken } from "../utils/tools";
import { LoginAPI } from "../services/loginReg";
function Reg() {
  const nav = useNavigate();
  const back = () => nav("/");
  const [visible, setVisible] = useState(false);
  return (
    <div className="reg-y">
      <NavBar onBack={back}>好大夫</NavBar>
      <Logo />
      <h2>好大夫用户登录</h2>
      <Card>
        <Form
          onFinish={(v) => {
            console.log(v);
            LoginAPI(v).then((res) => {
              // Toast.show({ content: res.errorMessage });
              // setToken(res.data);
              // nav("/");
              if (res.success) {
                Toast.show({ content: res.errorMessage });
                setToken(res.data);
                nav("/");
              } else {
                Toast.show({ content: res.errorMessage });
              }
            });
          }}
        >
          <Form.Item label="用户名:" name="userName">
            <Input placeholder="请输入用户名" clearable />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            extra={
              <div className="">
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
          >
            <Input
              placeholder="请输入密码"
              clearable
              type={visible ? "text" : "password"}
            />
          </Form.Item>

          <Form.Item>
            <Button block type="submit" color="primary" size="large">
              登录
            </Button>
          </Form.Item>
        </Form>
        <Link to="/reg">没有账号，去注册</Link>
      </Card>
      <p style={{ textAlign: "center" }}>@东山科技</p>
    </div>
  );
}

export default Reg;
